<template>
  <div class="user">
    <!--  顶部信息  -->
    <div class="header">
      <div class="header_title">
        <span class="header_title_item">个人</span>
        <van-icon class="header_title_icon" name="setting-o" />
      </div>
      <div class="header_content">
        <div class="header_user_top">
          <div class="header_user_top_left">
            <span class="header_user_info">{{ userName }}</span>
            <p class="header_user_id">{{ userId }}</p>
          </div>
          <van-image
            class="header_user_img"
            round
            src="https://img.yzcdn.cn/vant/cat.jpeg"
          />
        </div>
        <div class="header_user_bottom">
          <div class="header_user_bottom_balance">
            <span class="header_user_balance_total">{{ userBalance }}</span>
            <p class="header_user_balance_info">
              <i style="opacity:0.7;margin-right: 50px;">账户余额</i>
              <span class="header_user_bottom_btn">查看账单</span>
            </p>
          </div>
        </div>
      </div>
    </div>

    <!--  中间内容  -->
    <div class="section">
      <h1 class="section_title">
        我的出价
      </h1>
      <div class="mine_price">
        <div class="price">
          <van-image
            class="price_image"
            :src="require('@/assets/img/user/now_price.png')"
          />
          <van-icon dot style="margin-left: 15px;font-size: 36px" />
          <span class="price_text">当前出价</span>
        </div>
        <div class="price" style="float: right;">
          <van-image
            class="price_image"
            :src="require('@/assets/img/user/history_price.png')"
          />
          <span class="price_text">历史出价</span>
        </div>
      </div>
      <h1 class="section_title">
        我买到的
      </h1>
      <div class="my_buy">
        <div class="my_buy_info">
          <div class="my_buy_info_count">
            <span class="some_count">
              {{ waitPayment }}
            </span>
            <p>待付款</p>
          </div>
          <div class="my_buy_info_count">
            <span class="some_count">
              {{ waitGoods }}
            </span>
            <p>待收货</p>
          </div>
          <div class="my_buy_info_count">
            <span class="some_count">
              {{ returnGoods }}
            </span>
            <p>退货 售后</p>
          </div>
        </div>
        <div class="my_buy_all">
          <van-icon name="apps-o" class="my_buy_all_icon" />
          <p class="my_buy_all_info">全部</p>
        </div>
      </div>
      <h1 class="section_title">
        升级卖家
      </h1>
      <div class="become_sell">
        <div class="become_sell_top">
          <h1 class="become_sell_top_title">升级成为卖家</h1>
          <van-image
            class="become_sell_top_icon"
            :src="require('@/assets/img/user/sell_logo.png')"
          />
        </div>
        <p class="become_sell_info">Apply to become a seller</p>
        <p class="become_sell_btn">
          <span class="btn"
            >立即升级
            <van-icon class="btn_icon" name="arrow" />
            <van-icon class="btn_icon" name="arrow" />
          </span>
        </p>
      </div>
      <h1 class="section_title">
        个人服务
      </h1>
      <div class="self_server">
        <div class="self_server_item">
          <div class="self_server_item_top fcc">
            <van-image
              class="self_server_item_img"
              :src="require('@/assets/img/user/self_server_03.jpg')"
            />
          </div>
          <p class="self_server_item_bottom">平台规则</p>
        </div>
        <div class="self_server_item">
          <div class="self_server_item_top fcc">
            <van-image
              class="self_server_item_img"
              :src="require('@/assets/img/user/self_server_05.jpg')"
            />
          </div>
          <p class="self_server_item_bottom">我的客服</p>
        </div>
        <div class="self_server_item">
          <div class="self_server_item_top fcc">
            <van-image
              class="self_server_item_img"
              :src="require('@/assets/img/user/self_server_07.jpg')"
            />
          </div>
          <p class="self_server_item_bottom">扫码物品详情</p>
        </div>
      </div>
    </div>

    <!--  底部导航  -->
    <Footer page="user"></Footer>
  </div>
</template>

<script>
import Footer from "@/components/Footer";
export default {
  name: "user",
  data() {
    return {
      userName: "王木木",
      userId: "5656565656",
      userImg: "https://img.yzcdn.cn/vant/cat.jpeg",
      userBalance: "14,999",
      waitPayment: "0", // 待付款
      waitGoods: "0", // 待收货
      returnGoods: "0" // 退货 售后
    };
  },
  components: {
    Footer
  }
};
</script>

<style lang="less" scoped>
.user {
  padding-bottom: 98px;
  .header {
    width: 100%;
    height: 548px;
    padding: 0 30px;
    background: linear-gradient(90deg, #ff3b3e, #ff7f3f);
    .header_title {
      height: 100px;
      width: 100%;
      padding-top: 30px;
      .header_title_item {
        display: block;
        width: 100px;
        height: 36px;
        text-align: center;
        margin: 0 auto;
        font-size: 38px;
        font-family: SourceHanSansCN;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
      }
      .header_title_icon {
        float: right;
        font-size: 36px;
        color: #ffffff;
        margin-top: -36px;
      }
    }
    .header_content {
      width: 100%;
      .header_user_top {
        height: 120px;
        .header_user_top_left {
          float: left;
          margin-top: 24px;
          .header_user_info {
            height: 36px;
            font-size: 38px;
            font-family: SourceHanSansCN;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
          }
          .header_user_id {
            height: 22px;
            font-size: 28px;
            margin-top: 14px;
            font-family: SourceHanSansCN;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            opacity: 0.7;
          }
        }
        .header_user_img {
          float: right;
          width: 120px;
          height: 120px;
          background: rgba(255, 255, 255, 1);
          border-radius: 50%;
        }
      }
      .header_user_bottom {
        height: 120px;
        .header_user_bottom_balance {
          margin-top: 53px;
          .header_user_balance_total {
            height: 37px;
            font-size: 38px;
            font-family: SourceHanSansCN;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
          }
          .header_user_balance_info {
            margin-top: 14px;
            height: 25px;
            font-size: 26px;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
          }
        }
      }
    }
  }
  .section {
    width: 750px;
    height: 1318px;
    margin-top: -140px;
    padding: 0 30px;
    background: rgba(255, 255, 255, 1);
    border-radius: 18px 18px 0 0;
    overflow: hidden;
    .section_title {
      height: 33px;
      font-size: 34px;
      margin-top: 60px;
      font-family: SourceHanSansCN;
      font-weight: 600;
      color: rgba(51, 51, 51, 1);
    }
    .mine_price {
      height: 168px;
      padding-top: 40px;
      .price {
        float: left;
        width: 330px;
        height: 128px;
        background: rgba(237, 237, 237, 1);
        border-radius: 18px;
        padding: 40px;
        .price_image {
          float: left;
          width: 48px;
          height: 48px;
          background: rgba(254, 120, 76, 1);
          border-radius: 9px;
        }
        .price_text {
          float: left;
          height: 48px;
          line-height: 48px;
          font-size: 28px;
          margin-left: 32px;
          font-family: SourceHanSansCN;
          font-weight: 500;
          color: rgba(51, 51, 51, 1);
        }
      }
    }
    .my_buy {
      height: 170px;
      padding: 46px 0;
      border-bottom: 1px solid rgba(206, 206, 206, 1);
      .my_buy_info {
        float: left;
        height: 100%;
        width: 400px;
        display: flex;
        justify-content: space-between;
        .my_buy_info_count {
          /*flex: 1;*/
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          text-align: center;
          font-size: 26px;
          font-family: SourceHanSansCN;
          font-weight: 400;
          color: rgba(136, 136, 136, 1);
          .some_count {
            font-size: 38px;
            font-family: Arial;
            font-weight: bold;
            color: rgba(51, 51, 51, 1);
          }
        }
      }
      .my_buy_all {
        float: right;
        height: 100%;
        width: 80px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        text-align: center;
        font-size: 26px;
        font-family: SourceHanSansCN;
        font-weight: 400;
        color: rgba(136, 136, 136, 1);
        .my_buy_all_icon {
          font-size: 38px;
          font-weight: bold;
          color: rgba(51, 51, 51, 1);
        }
      }
    }
    .become_sell {
      width: 690px;
      height: 260px;
      /*background: linear-gradient(150deg, #a5a6b5);*/
      background-color: #a5a6b5;
      border-radius: 18px;
      margin-top: 40px;
      padding: 40px 50px;
      box-shadow: 0px 50px 500px #cccccc;
      .become_sell_top {
        width: 100%;
        height: 40px;
        .become_sell_top_title {
          float: left;
          height: 37px;
          font-size: 39px;
          font-family: SourceHanSansCN;
          font-weight: bold;
          color: rgba(255, 255, 255, 1);
        }
        .become_sell_top_icon {
          float: left;
          margin-left: 15px;
          width: 39px;
          height: 39px;
          background: rgba(255, 255, 255, 1);
          /*opacity:0.5;*/
          border-radius: 50%;
          overflow: hidden;
        }
      }
      .become_sell_info {
        margin-top: 17px;
        height: 27px;
        font-size: 25px;
        font-family: SourceHanSansCN;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
      }
      .become_sell_btn {
        height: 50px;
        .btn {
          display: block;
          width: 156px;
          height: 48px;
          line-height: 48px;
          margin-top: 35px;
          background: rgba(174, 175, 189, 1);
          border-radius: 24px;
          padding-left: 18px;
          font-size: 24px;
          font-family: SourceHanSansCN;
          font-weight: 400;
          color: rgba(255, 255, 255, 1);
          .btn_icon {
            margin-left: -10px;
            margin-top: 5px;
            position: relative;
            top: 2px;
          }
        }
      }
    }
    .self_server {
      height: 180px;
      width: 100%;
      margin-top: 40px;
      display: flex;
      justify-content: space-between;text-align: center;
      .self_server_item {
        display: flex;
        width: 216px;
        flex-direction: column;
        justify-content: space-around;
        text-align: center;
        .self_server_item_top {
          width:216px;
          height:120px;
          background:rgba(255,255,255,1);
          border-radius:9px;
          .self_server_item_img {
            width:40px;
            height:46px;
          }
        }
        .self_server_item_bottom {
          margin-top: 30px;
          height:25px;
          font-size:26px;
          font-family:PingFang SC;
          font-weight:500;
          color:rgba(51,51,51,1);
        }
      }
    }
  }
}
</style>
